
<meta charset="utf-8">
<style type="text/css">
</style>

<div id="biz_pmpProject_detail_req_conatainer">
	<div class="row">
		<div class="col-lg-3 col-xs-6 ">
				<div class="box" >
				<div class="box-header with-border">
					<button type="button" class="btn btn-block btn-info" v-on:click="createRootReq">创建根节点</button>
				</div>
				<div class="box-body">
			<ul id="requiresZTree"  
					v-ktree="{url:'pmp/service/pub/pmpRequires/loadRequiresZTreeVo',
							 ajaxParam: ajaxParam_(), 
							 onClick:'zTreeOnClick',
							 onRightClick:'zTreeOnRightClick',
							 chkEnable:false,
							 chkStyle:'checkbox'}" 
							 class="ztree">
 			</ul>
				</div>
			</div>

		</div>
		<div class="col-lg-9 col-xs-6 ">
		
			<div class="box" >
				<div class="box-header with-border">
				<font style="font-size: 2em;" >{{ requires.name}} </font>
					<div class="btn-group " id="pmpProjectTableToolbar" role="group" style="float: right;">
					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="context_menu_updateReq">
						<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 修改需求
					</button>

					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="">
						<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i> 创建任务
					</button>
					
					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="">
						<i class="glyphicon glyphicon-user" aria-hidden="true"></i> 提交bug
					</button>
				</div>
				
				</div>
				<div class="box-body">
					   <div class="nav-tabs-custom">
				            <ul class="nav nav-tabs">
				              <li class="active"><a href="#tab_1" data-toggle="tab">需求详情</a></li>
				              <li><a href="#tab_2" data-toggle="tab">相关任务</a></li>
				              <li><a href="#tab_3" data-toggle="tab">相关bug</a></li>
				              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
				            </ul>
				            <div class="tab-content">
				              <div class="tab-pane active" id="tab_1">
				              	  责任人： <b>{{requires.chargeUserName}}</b> &nbsp;&nbsp; &nbsp;&nbsp;创建时间： <b>{{requires.createTime}}</b>&nbsp;&nbsp; &nbsp;&nbsp;当前版本： <b>{{requires.projectVersionName}}</b>
								<hr>
				                <p>{{requires.detail}}</p>
				               
				              </div>
				              <!-- /.tab-pane -->
				              <div class="tab-pane" id="tab_2">
				                <table id="reqTaskBootstrapTable" data-mobile-responsive="true"></table>
				               
				              </div>
				              <!-- /.tab-pane -->
				              <div class="tab-pane" id="tab_3">
				                <table id="reqBugBootstrapTable" data-mobile-responsive="true"></table>
				               
				              </div>
				              <!-- /.tab-pane -->
				            </div>
				            <!-- /.tab-content -->
         		</div>
				</div>
			</div>
			
		</div>
	</div>

</div>
<style>
.login-dialog .modal-dialog {
 width: 120px;
}
</style>
<script>

var project_detail_req_main=new Vue({  
	  el: '#biz_pmpProject_detail_req_conatainer',
	  data:{
		  projectId: project_detail_main.$data.projectId,
		  selecttedId: null,
		  requires:{
			  name: "用户添加",
			  chargeUserName: "赵华太",
			  createTime:"2018/10/8 13:56:49",
				  projectVersionName:"v1.0.0",
				  detail: "Exactly like the original bootstrap tabs except you should use the custom wrapper .nav-tabs-custom to achieve this style."
		 },
		  bus:new Vue(),
	  },
	  mounted:function(){
		  var _this=this;
	  },
    methods: {
    	zTreeOnRightClick : function (event, treeId, treeNode) {
    		 var _this=this;
    		 var nodeType=treeNode.nodeType; //类型_D#0根模块,1需求，2模块#
    		 var _id=treeNode.id;
    		 _this.$data.selecttedId=_id;
    		 var _name=treeNode.name
    		  var url="";
    		 if("2"==nodeType||"0"==nodeType){
    			 BootstrapDialog.show({title:"请选择功能", message:'--------------------', cssClass:'login-dialog', type: BootstrapDialog.TYPE_DEFAULT,
        	            buttons: [
        	            	{label: '添加模块',action: function(self){self.close();_this.context_menu_addModule(_id);}},
        	            	{label: '修改名称',action: function(self){self.close();_this.context_menu_updateName(_id,_name);}},
            	            {label: '创建需求',action: function(self){self.close();_this.context_menu_createReq(_id);}},
            	            {label: '删除模块',action: function(self){self.close();_this.context_menu_delete(_id);}},]
        	        });
    		 }else if("1"==nodeType){
    			 BootstrapDialog.show({ title:"请选择功能", message:'--------------------', cssClass:'login-dialog',type: BootstrapDialog.TYPE_DEFAULT,
        	            buttons: [
        	            	{label: '修改需求',action: function(self){self.close();_this.context_menu_updateReq(_id);}},
        	            	{label: '添加版本',action: function(self){self.close();_this.context_menu_addToVersion(_id);}},
            	            {label: '删除需求',action: function(self){self.close();_this.context_menu_delete(_id);}},]
        	        });
    		 }

		},
		 context_menu_addModule: function(id){
			  var　_this=this;
			 var url="/views/pmpRequires/pmpRequires.module.add.html";
			 zfesLayerEditDg.open(url,{"parentId":id},"模块添加",460,function(){
				 _this.context_menu_callback();
			 });
		  },
		  context_menu_updateName: function(id,name){
			  var　_this=this;
			 var url="/views/pmpRequires/pmpRequires.module.updatename.html";
			 zfesLayerEditDg.open(url,{"parentId":id,"name":name},"修改名称",460,function(){
				 _this.context_menu_callback();
			 });
		  },
		  context_menu_createReq: function(id){
			  var　_this=this;
			 var url="/views/pmpRequires/pmpRequires.req.add.html";
			 zfesLayerEditDg.open(url,{"projectId":_this.$data.projectId,"parentId":id},"需求信息编辑",460,function(){
				 _this.context_menu_callback();
			 });
		  },
		  context_menu_updateReq: function(){
			  var　_this=this;
			 var url="/views/pmpRequires/pmpRequires.req.edit.html";
			 zfesLayerEditDg.open(url,{"id": _this.$data.selecttedId},"需求信息编辑",460,function(){
				 _this.context_menu_callback();
			 });
		  },
		  context_menu_addToVersion: function(id){
			  var　_this=this;
			 var url="/views/pmpRequires/pmpRequires.req.version.html";
			 zfesLayerEditDg.open(url,{"id":id},"添加到版本",460,function(){
				 
				 _this.context_menu_callback();
			 });
		  },
		  context_menu_delete: function(id){
			  var　_this=this;
			  var url="/pmp/service/pm/pmpRequires/deletePmpRequires";
			  zfesAjax.ajaxTodo(url,{"id":id},function(data) {
					alertSwal.successText(data.message);
					layer.close(layer.index);
					
					_this.context_menu_callback();
				})
		  },
		  context_menu_callback: function(id){
			  var zTree = $.fn.zTree.getZTreeObj("requiresZTree");
				 zTree.reAsyncChildNodes(null,  "refresh", false);
				 setTimeout(function(){ zTree.expandAll(true); }, 1000);
		  },
    	zTreeOnClick: function(event, treeId, treeNode) {
    		 var　_this=this;
    		 var nodeType=treeNode.nodeType;
    		 var id=treeNode.id;
    		 _this.$data.selecttedId=id;
    		 var name=treeNode.name
    		  if("1"==nodeType){ //类型_D#0根模块,1需求，2模块#
    			  var  url="/pmp/service/pub/pmpRequires/loadPmpRequiresById";
    			  _this.loadSelectedReq(id);
    			  _this.loadReqTaskList(id);
    			  _this.loadReqBugList(id);
    		 }
    	},
    	loadReqTaskList: function(id){
    		 var _this=this;
	  		  var columns=[
	  					{field:'project_version_name',title:'所属版本',width:30},
	  					{field:'task_name',title:'任务名称',width:160},
	                    {field:'charge_user_name',title:'负责人',width:60},
						{field:'expiry_time',title:'截止日期',width:100},
						{field:'progress',title:'进度',width:100},
						{field:'assign_hours',title:'评估时间',width:100},
						{field:'work_hours',title:'投入时间',width:100},
						{field:'difficulty_score',title:'难度',width:100},
						{field:'priority',title:'优先级',width:40},
						{field:'createTime',title:'创建时间',width:100},
						{field:'status',title:'当前状态',width:40,formatter:_this.formatTaskStatus}]; 
	  		var  url="/pmp/service/pub/pmpTasks/loadPmpTasksDataSet";
	    		zfesBstable.laodTable($("#reqTaskBootstrapTable"),null,null,url,columns,{"requireId":id},{showRefresh:false,showToggle:false,showColumns:false});
	    	
    	},
    	loadReqBugList: function(id){
    		 var _this=this;
	  		  var columns=[
	  					{field:'project_version_name',title:'所属版本',width:30},
	  					{field:'charge_user_name',title:'负责人',width:80},
	  					{field:'assign_user_name',title:'指派',width:80},
	  					{field:'expiry_time',title:'截止日期',width:100},
	  					{field:'progress',title:'进度',width:100},
	  					{field:'assign_hours',title:'评估时间',width:100},
						{field:'work_hours',title:'投入时间',width:100},
						{field:'deduce_score',title:'扣分',width:100},
						{field:'difficulty_score',title:'难度',width:100},
						{field:'createTime',title:'创建时间',width:100},
						{field:'status',title:'当前状态',width:100,formatter:_this.formatBugStatus}]; 
	  		var  url="/pmp/service/pub/pmpTasks/loadPmpTasksDataSet";
	    		zfesBstable.laodTable($("#reqBugBootstrapTable"),null,null,url,columns,{"requireId":id},{showRefresh:false,showToggle:false,showColumns:false});
    	},
    	loadSelectedReq: function(id){
    		var _this=this;
    		var  url="/pmp/service/pub/pmpRequires/loadPmpRequiresById";
			  zfesAjax.ajaxTodo(url,{"id":id},function(data) {
					_this.$data.requires=data.data.requires;
			 })
    	},
    	ajaxParam_: function (){
    		var _this=this;
    		return {"projectId":_this.$data.projectId};
    	},
    	createRootReq: function(){
    		  let　_this=this;
    		  var url="/views/pmpRequires/pmpRequires.root.add.html";
    		  zfesLayerEditDg.open(url,{"projectId":_this.$data.projectId},"根需求编辑",460,function(){});
    	}
   }
});

$(function(){
	setTimeout(function(){ $.fn.zTree.getZTreeObj("requiresZTree").expandAll(true); }, 1000);
	
});

</script>


